<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '字体大小',
    layout: false,
    'app-plus': {
      background: '#f8f8f8',
    },
  },
}
</route>

<template>
  <th-page-box tabBarHeight="200rpx">
    <template #tabBar>
      <page-meta :root-font-size="info.fontSize"></page-meta>
      <wd-navbar fixed title="字体大小" :bordered="false" safeAreaInsetTop>
        <template #left>
          <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
        </template>
        <template #right>
          <view class="right_btn" @click="setFontSize">
            <text>确定</text>
          </view>
        </template>
      </wd-navbar>
    </template>

    <template #inner>
      <view class="container">
        <view class="example">
          <view class="title">标题</view>
          <view class="sub_title">副标题</view>
          <view class="content">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
          </view>
        </view>
        <view class="action">
          <view class="tip-box">
            <view
              class="tip"
              v-for="(item, index) in new Array(info.max + 1)"
              :index="item"
              :style="{ fontSize: 15 + index + 'px', lineHeight: 15 + info.max + 'px' }"
            ></view>
          </view>
          <view class="box">
            <view class="chil-box">
              <view class="item" v-for="(item, index) in new Array(info.max + 1)" :index="item">
                <view class="tip" v-if="index === 0" style="margin-left: -3px">A</view>
                <view class="tip" v-if="index === 1" style="margin-left: -12px">标准</view>
                <view class="tip" v-if="index === info.max" style="margin-left: -3px">A</view>
                <view class="v-line"></view>
              </view>
            </view>
            <view class="slider-box">
              <slider
                :value="info.value"
                @change="sliderChange"
                @changing="sliderChange"
                block-size="22"
                backgroundColor="#dedede"
                min="0"
                :max="info.max"
                step="1"
              />
            </view>
          </view>
        </view>
      </view>
    </template>
  </th-page-box>
</template>

<script lang="ts" setup>
import showModal from '@/utils/modal';
import { useSetting } from '@/stores/setting';

const setting = useSetting();

// 提交表单数据
const info = reactive({
  fontSize: '16px',
  value: 1,
  max: 5,
});

const sliderChange = (e) => {
  info.fontSize = `${15 + e.detail.value}px`;
};

const goBack = () => {
  uni.navigateBack();
};

const setFontSize = () => {
  // uni.showModal({
  //   title: '提示',
  //   content: '设置字体大小需要重启应用才会生效',
  //   showCancel: true,
  //   success: ({ confirm, cancel }) => {
  //     if (confirm) {
  //       setting.setRootFontSize(info.fontSize);
  //       // plus.runtime.restart();
  //       uni.reLaunch({
  //         url: `/pages/index/index`,
  //       });
  //     }
  //   },
  // });
  showModal({
    content: '设置字体大小需要重启应用才会生效，确认立即进行设置吗？',
  }).then(async () => {
    setting.setRootFontSize(info.fontSize);
    // plus.runtime.restart();
    uni.reLaunch({
      url: `/pages/index/index`,
    });
  });
};

onLoad((options) => {
  if (setting.rootFontSize) {
    info.fontSize = setting.rootFontSize;
    info.value = parseInt(info.fontSize) - 15;
    console.log(info.value);
  }
});
</script>
<style scoped lang="scss">
page {
  background-color: #f8f8f8;
}

.page {
  height: 100%;
  background-color: #f8f8f8;
}

.wd-cell-group {
  ~ .wd-cell-group {
    margin-top: 24rpx;
  }
}
.check-update-submit-item {
  // padding: 20% 0 0%;
  padding: 50rpx 0 0;

  .check-update-submit {
    width: 60%;
    height: 70rpx;
    margin: 0 auto;
    font-size: 30rpx;

    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;

    // background-color: #0081ff;
    background-color: rgb(8 131 237);
    border-radius: 10rpx;
  }
}
.right_btn {
  padding: 24rpx;
  color: #fff;
  font-size: 1rem;
}
.container {
  height: 100%;
  // padding-top: 100rpx;
  background-color: #f8f8f8;
}
.example {
  height: calc(100% - 160px);
  padding: 24rpx 32rpx;
}
.title {
  margin-bottom: 24rpx;
  font-size: 1.125rem;
}
.sub_title {
  margin-bottom: 32rpx;
  // text-indent: 1rem;
  font-size: 1rem;
}
.content {
  // text-indent: 2rem;
  font-size: 0.875rem;
}
.action {
  width: 100%;
  // padding: 12px 0;
  padding-top: 10px;
  position: sticky;
  bottom: 0;
  background-color: #fff;
}
.box {
  width: 100%;
  position: relative;
  padding: 16px 0;
  height: 90px;

  .chil-box {
    padding: 0 17px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    height: 16px;
    left: 8px;
    right: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    .tip {
      position: absolute;
      top: -32px;
    }
    // z-index: 9999;

    .v-line {
      width: 2px;
      height: 100%;
      background-color: #dedede;
    }
  }
  .slider-box {
    position: absolute;
    height: 38px;
    left: 9px;
    right: 9px;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
</style>
